<template>
 <div>
	<div class="search">
		<input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
	</div>
  <div class="serach-content" 
       ref="search"
       v-show="keyword">
    <ul>
      <li class="search-item border-bottom" 
          v-for = "item of list" 
          :key="item.id" 
          @click = "handleCurrentCity(item.name)">{{item.name}}</li>
      <li class="search-item border-bottom" v-show="hasNoData">
          没有找到匹配数据</li>
    </ul>
  </div>
 </div>
</template>
<script>
import { mapMutations } from 'vuex'
import Bscroll from 'better-scroll'
export default {
	name: 'CitySearch',
  props :{
    cities : Object
  },
  data () {
    return {
      keyword : '',
      timer : null,
      list :[]
    }
  },
  methods: {
    handleCurrentCity(city){
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  },
  computed: {
     hasNoData () {
      return !this.list.length
     }
  },
  watch : {
    keyword () {
      if(this.timer){
      clearTimeout(this.timer)
    }
    this.timer = setTimeout(()=>{
      const result = []
      for(let i in this.cities){
        this.cities[i].forEach((value)=>{
          if(value.spell.indexOf(this.keyword) > -1 || 
            value.name.indexOf(this.keyword) >-1){
            result.push(value)
          }
        })
      }
      this.list = result
    },100)
    }  
  },
  mounted () {
     this.scroll = new Bscroll(this.$refs.search)
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search
  height :.72rem
  padding : 0 .1rem
  background : $bgColor
  .search-input
     box-sizing: border-box
     width :100%
     height : .62rem
     line-height: .62rem
     padding: 0 .1rem
     border-radius: .06rem
     text-align: center
     color: #666
.serach-content
  overflow: hidden
  z-index:1
  position: absolute
  top:1.58rem
  bottom: 0
  left: 0
  right: 0
  background:#eee
  .search-item
     background: #fff
     color: #666
     line-height: .62rem
     padding-left: .2rem
 </style>